@page "/file-manager/api"

@using Syncfusion.Blazor.FileManager;
@using Syncfusion.Blazor.Buttons;

@inject IJSRuntime JsRuntime;

@inherits SampleBaseComponent;

<SampleDescription>
  <p><p>This sample demonstrates the properties of File Manager component from the property pane. Select any properties from the property pane to customize the File Manager.</p></p>  
</SampleDescription>
<ActionDescription>
  <p>The <b>File Manager</b> component is used to explore a file system through a web application, similar to the windows explorer for windows. It supports the basic file operations such as create, rename, delete.</p>
  <p><b>Note: </b>File Manager's upload functionality is restricted in the online demo. If you need to test upload functionality, please install <a target='_blank' href='https://www.syncfusion.com/downloads'>Syncfusion Essential Studio </a>on your machine and run the demo.</p> 
</ActionDescription>

<div class="col-lg-8 control-section">
    <div class="control_wrapper">
        <SfFileManager TValue="FileManagerDirectoryContent">
            <FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Fileoperations"
                                     UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload"
                                     DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
                                     GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage">
            </FileManagerAjaxSettings>
            <FileManagerToolbarSettings Visible="@Visible"></FileManagerToolbarSettings>
            <FileManagerNavigationPaneSettings Visible=false></FileManagerNavigationPaneSettings>
        </SfFileManager>
    </div>
</div>
<div class="col-lg-4 property-section">
    <div class="property-panel-header">
        Properties
    </div>
    <div class="row property-panel-content">
        <div class="card-body">
            <div class="form-group row">
                <label for="settings-bubble-up-input" class="col-sm-4 col-form-label form-label">Toolbar</label>
                <div class="col-sm-8">
                    <SfCheckBox @bind-Checked="@Check" Name="toolbar" ValueChange="OnToolbarChange" TChecked="bool"></SfCheckBox>
                </div>
            </div>
        </div>
    </div>
</div>

@code {
    private bool Check { get; set; } = true;
    private bool Visible { get; set; } = true;

    private void OnToolbarChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
    {
        this.Visible = args.Checked;
    }
}

<style>
    .property-panel-table div {
        padding-left: 0;
        padding-top: 0;
    }

    #property tr {
        height: 50px;
    }

    #tool {
        padding-top: 5px;
    }

    #tool_toggle {
        width: 100px;
    }

    .form-label {
        margin-bottom: 0;
        font-size: 12px;
        line-height: 1.5;
        font-size: 13px;
        font-weight: 500;
    }
    .row {
        margin-left: 0px;
        margin-right: 0px;
     }

    .row-header {
        font-size: 13px;
        font-weight: 500;
     }
</style>
